<template>
  <div>
    <Container>
      <van-cell-group>
        <van-cell>
          <template #icon>
            <div class="icon_container">
            <van-uploader v-model="fileList" :max-count="1"/>  
            </div>
          </template>
          <template #title>
            <div
              class="title_container"
              @click="onClickRouter"
              v-show="userName.length <= 0"
            >
              登录
            </div>
            <div class="title_container" v-show="userName.length > 0">
              {{ userName }}
            </div>
          </template>
          <template #label>
            <div class="label_container">积分：300</div>
          </template>
          <template #default>
            <div class="default_icon">
              <van-icon
                name="setting-o"
                @click="onClickBack"
                color="white"
                size="1rem"
              />
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-notice-bar
       scrollable 
        left-icon="volume-o"
        text="且看烟高云低处   远眸尽过满落辰~~"
      />
      <div class="sy_ding">
        <div class="sy_con">
          <p class="sy_ri"><van-icon name="coupon-o" size="24px" /></p>
          <p class="ding">我的订单</p>
          <p class="sy_arr">
            <van-icon name="arrow" size="24px"  />
          </p>
        </div>
      </div>
      <div>
        <div>
          <GridBox columnNum="4" :GridData="lists"></GridBox>
        </div>
      </div>
      <div class="mine_background"></div>
      <div class="sy-con">
        <div class="sy-nei">
          <GridBox columnNum="3" :GridData="listss"></GridBox>
        </div>
      </div>
    </Container>
  </div>
</template>
<script>
import Container from "../components/container/Container"; //引入子组件（容器组件）
import GridBox from "../components/grid/IconButtonBox"; //引入子组件 宫格
import Vue from "vue";
import { Cell, CellGroup, Image as VanImage, Icon, NoticeBar } from "vant";

import { Uploader } from 'vant';

Vue.use(Uploader);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(NoticeBar);
export default {
  components: {
    //注册组件
    Container,
    GridBox,
  },
  data() {
    return {
        fileList: [
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
       
      ],
      userName: "",
      lists: [
        {
          img:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602686167683&di=b4b814e212a91aef7f8a291276807e5f&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F44%2F55%2F5814b1545d5fa_610.jpg",
          title: "待付款",
        },
        {
          img:
            "http://bpic.588ku.com/element_origin_min_pic/01/52/00/965745e2aa972c5.jpg!rw400",
          title: "待发货",
        },
        {
          img:
            "http://ku.90sjimg.com/element_origin_min_pic/01/38/50/32573c885216a4e.jpg",
          title: "待收货",
        },
        {
          img:
            "http://bpic.588ku.com/element_origin_min_pic/01/39/91/50573cdcf689fa9.jpg!r650",
          title: "待评价",
        },
      ],
      listss: [
        {
          img:
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2589852107,558597846&fm=26&gp=0.jpg",
          title: "我的余额",
        },
        {
          img:
            "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1602675621&di=db5a0c9272690f78c44c9131a4a1e487&src=http://pic.downcc.com/upload/2018-11/201811301410251039.png",
          title: "我的砍价",
        },
        {
          img:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1299864914,3418867127&fm=26&gp=0.jpg",
          title: "我的礼券",
        },
        {
          img:
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2453338252,3540944447&fm=26&gp=0.jpg",
          title: "我的收藏",
        },
        {
          img:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1155096444,1725848709&fm=26&gp=0.jpg",
          title: "我的地址",
        },
        {
          img:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602685946058&di=7dcddb359bbeb8a2b85f5720114dd7ae&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F00%2F99%2F28%2F58ddddfbc346f_610.jpg",
          title: "联系客服",
        },
      ],
    };
  },
  mounted() {
    var user = localStorage.getItem("username");
    if (user) {
      this.userName = user;
    }
  },
  methods: {
    onClickRouter() {
      //点击跳转登录页面
      this.$router.pushRouteByQuery("/login");
    },
    onClickBack() {
      //点击进入设置页面
      var token = localStorage.getItem("token");
      if (token) {
        this.$router.pushRouteByQuery("/backLogin");
      } else {
        this.$router.pushRouteByQuery("/login");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.van-cell {
  background: orange;
  height: 6rem;
}
.icon_container {
  width: 24%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  // background: red;
}
.title_container {
  margin-top: 10%;
  width: 100%;
  height: 50%;
  color: white;
  // background: pink;
  display: inline-flex;
  align-items: center;
}
.label_container {
  width: 100%;
  height: 50%;
  color: white;
  // background: green;
}
.default_icon {
  width: 26%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  // background: red;
}
.sy_ding {
  width: 100%;
  height: 2rem;
  // background:yellow;
  border-bottom: 1px solid grey;
  .sy_con {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    .sy_ri {
      margin-left: 1rem;
    }
    .ding {
      margin-left: 2rem;
    }
    .sy_arr {
      margin-left: 7.5rem;
    }
  }
}
.mine_background{
  width: 100%;
  height: 0.3rem;
  background: whitesmoke;
}
</style>